<?xml version="1.0" encoding="UTF-8"?>
<ui:decorate  template="/xhtml/plantillas/baseSeguridad.xhtml"
              xmlns:p="http://primefaces.org/ui"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:ui="http://java.sun.com/jsf/facelets">    

    <ui:define name="titulo">#{label['administracion.clientes']}</ui:define>

    <ui:define name="java_script">
        <script type="text/javascript"> 
            function enmascarar(){
                $(document).ready(function(){
                    $('#form_conci\\:id_fecha_nac').mask('99/99/9999');                    
                });
            }
        </script>
    </ui:define>   

    <ui:define name="contenido">

        <h:outputText value="#{label['administracion.clientes']}" class="encabezado"/>              
        <hr id="horizontalLine" style="width: 770px; margin-left: 20px"/> 
        <h:panelGrid columns="10" class="panelFormulario" >
            <p:accordionPanel activeIndex="#{beanAdministrarCliente.numero}" style="margin-top: 20px; width: 765px" >  
                <p:tab title="Cliente" >         

                    <p:fieldset id="fiel" legend="Información Personal">
                        <p:panelGrid>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['identificacion']}"/>
                                </p:column> 
                                <p:column>  
                                    <p:inputText id="id_idd"  value="#{beanAdministrarCliente.identificacion}" style="width: 250px" maxlength="20">
                                        <p:ajax event="change" listener="#{beanAdministrarCliente.accionIdentificacion}" update=":form_conci"/>
                                    </p:inputText>                                        
                                </p:column>
                            </p:row>                            
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['nombre']}"/>                
                                </p:column>
                                <p:column>
                                    <p:inputText id="id_nombre" value="#{beanAdministrarCliente.nombre}" disabled="#{!beanAdministrarCliente.habilitar}"
                                                 style="width: 250px" maxlength="30"/>                                                                                       
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['apellido1']}"/>               
                                </p:column>
                                <p:column>
                                    <p:inputText id="id_apellido1" value="#{beanAdministrarCliente.apellido1}" disabled="#{!beanAdministrarCliente.habilitar}"
                                                 style="width: 250px" maxlength="30"/>                                    
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['apellido2']}" />               
                                </p:column>
                                <p:column>
                                    <p:inputText id="id_apellido2" value="#{beanAdministrarCliente.apellido2}" disabled="#{!beanAdministrarCliente.habilitar}"
                                                 style="width: 250px" maxlength="30"/>                                    
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['nacionalidad']}" escape="false"/>
                                </p:column>
                                <p:column>
                                    <p:inputText id="id_nacionalidad" value="#{beanAdministrarCliente.nacionalidad}" disabled="#{!beanAdministrarCliente.habilitar}"
                                                 style="width: 250px" maxlength="50"/>                                    
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['email']}" escape="false"/>
                                </p:column>
                                <p:column>                                                                    
                                    <p:inputText id="id_email"  value="#{beanAdministrarCliente.email}" disabled="#{!beanAdministrarCliente.habilitar}"
                                                 style="width: 250px" maxlength="30"/>                                    
                                </p:column>
                            </p:row>                            
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['fecha.nacimiento']}" escape="false"/>
                                </p:column>
                                <p:column>
                                    <p:calendar id="id_fecha_nac"                                         
                                                pattern="dd/MM/yyyy"  
                                                style="width: 250px;" maxlength="10"
                                                navigator="true" effect="slide"
                                                value="#{beanAdministrarCliente.fecha_nacimiento}" disabled="#{!beanAdministrarCliente.habilitar}"                                                 
                                                onfocus="enmascarar();"
                                                >
                                        <f:validator validatorId="DateValidator"/>
                                    </p:calendar> 
                                </p:column>                        
                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['sexo']}" escape="false"/>
                                </p:column>                           
                                <p:column>
                                    <p:selectOneMenu id="id_sexo"  value="#{beanAdministrarCliente.sexo}" disabled="#{!beanAdministrarCliente.habilitar}"
                                                     effect="fold" style="width: 150px">  
                                        <f:selectItem itemLabel="" itemValue=""  />  
                                        <f:selectItem itemLabel="Masculino" itemValue="M" />  
                                        <f:selectItem itemLabel="Femenino" itemValue="F" />              
                                    </p:selectOneMenu>                                     
                                </p:column>                    
                            </p:row>
                            <p:row>

                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['telefono1']}" escape="false"/>
                                </p:column>
                                <p:column>                                                                    
                                    <p:inputMask id="id_telefono1" mask="9999-9999"  value="#{beanAdministrarCliente.telefono1}" disabled="#{!beanAdministrarCliente.habilitar}"
                                                 style="width: 150px; text-align: center"/>                               
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>                        
                                    <h:outputText  styleClass="etiqueta" value="#{label['telefono2']}" escape="false"/>
                                </p:column>                        
                                <p:column>                        
                                    <p:inputMask id="id_telefono2" value="#{beanAdministrarCliente.telefono2}" disabled="#{!beanAdministrarCliente.habilitar}"
                                                 mask="9999-9999"  style="width: 150px; text-align: center"/>   
                                </p:column>
                            </p:row>                            
                            <p:row>
                                <p:column>                           
                                    <h:outputText  styleClass="etiqueta" value="#{label['estado.civil']}" escape="false"/>
                                </p:column>  
                                <p:column>  
                                    <p:selectOneMenu id="id_estado_civil" value="#{beanAdministrarCliente.estadoCivil}" disabled="#{!beanAdministrarCliente.habilitar}"
                                                     effect="fold" style="width: 150px">  
                                        <f:selectItem itemLabel="" itemValue=" " />  
                                        <f:selectItem itemLabel="Soltero" itemValue="S" />  
                                        <f:selectItem itemLabel="Casado" itemValue="C" />              
                                        <f:selectItem itemLabel="Divorsiado" itemValue="D" />              
                                        <f:selectItem itemLabel="Viudo" itemValue="V" />              
                                    </p:selectOneMenu>  
                                </p:column>
                            </p:row>                            
                            <p:row>
                                <p:column>                           
                                    <h:outputText  styleClass="etiqueta" value="#{label['estado']}" escape="false"/>
                                </p:column>  
                                <p:column>
                                    <p:selectOneMenu id="id_estado" disabled="#{!beanAdministrarCliente.habilitar}"
                                                     effect="fold"
                                                     style="width: 150px;"
                                                     value="#{beanAdministrarCliente.estado}"                                                  
                                                     >
                                        <f:selectItem itemLabel="" itemValue="0"/>
                                        <f:selectItems value="#{beanAdministrarCliente.lista_estados}"
                                                       var="estado"
                                                       itemLabel="#{estado.nombre}"
                                                       itemValue="#{estado.id_estado}" />                                    
                                    </p:selectOneMenu>   
                                </p:column>
                            </p:row>                            
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['direccion']}" style="width: 250px"/>
                                </p:column>
                                <p:column>
                                    <p:inputTextarea id="id_direccion" value="#{beanAdministrarCliente.direccion}" disabled="#{!beanAdministrarCliente.habilitar}"
                                                     style="width: 250px; height: 35px" maxlength="200" />                                                                            
                                </p:column>
                            </p:row>                            
                        </p:panelGrid>
                    </p:fieldset>
                    <p:column><p:commandButton value="#{label['limpiar']}" icon="ui-icon-arrow-4-diag" action="#{beanAdministrarCliente.limpiarCampos()}"
                                               update=":form_conci" style="margin-left: 400px"/></p:column>
                    <p:column><p:commandButton value="#{label['eliminar']}" icon="ui-icon-trash" disabled="#{!beanAdministrarCliente.modificar}"
                                               onclick="confirmation.show()" /></p:column>
                    <p:column><p:commandButton value="#{label['guardar']}"  icon="ui-icon-disk" action="#{beanAdministrarCliente.guardarCliente()}"
                                               update=":form_conci"/></p:column>

                    <f:facet name="footer">             
                        <p:commandButton id="id_guardar" value="#{label['guardar']}"                                
                                         action="/xhtml/index" process="@this"/>                
                        <p:commandButton value="#{label['cancelar']}" action="/xhtml/index" process="@this" />    
                    </f:facet>            

                </p:tab>  
            </p:accordionPanel>  
        </h:panelGrid>

        <p:fieldset legend="Lista de Clientes" style="width: 750px" >
            <p:dataTable id="dataTable" var="usuario" 
                         rows="5" value="#{beanAdministrarCliente.lista_clientes}"                           
                         rowsPerPageTemplate="5,10,15" selectionMode="single" 
                         selection="#{beanAdministrarCliente.persona_tabla}"
                         rowKey="#{usuario.identificacion}"
                         paginator="true"
                         filterEvent="enter"
                         paginatorPosition="bottom">  

                <p:ajax  event="rowSelect"  update=":form_conci" 
                         listener="#{beanAdministrarCliente.modificarCliente()}"/>

                <p:column headerText="Nombre" filterBy="#{usuario.nombre}" style="text-align: center" filterMatchMode="contains">                      
                    <h:outputText value="#{usuario.nombre}" />  
                </p:column>  

                <p:column headerText="Primer Apellido" filterBy="#{usuario.apellido1}" style="text-align: center" filterMatchMode="contains">                      
                    <h:outputText value="#{usuario.apellido1}" />  
                </p:column>  

                <p:column headerText="Segundo Apellido" filterBy="#{usuario.apellido2}"  style="text-align: center" filterMatchMode="contains">                      
                    <h:outputText value="#{usuario.apellido2}" />  
                </p:column>  

                <p:column headerText="Identificación" filterBy="#{usuario.identificacion}" style="text-align: center" filterMatchMode="contains">                      
                    <h:outputText value="#{usuario.identificacion}" />  
                </p:column>  
            </p:dataTable>  
        </p:fieldset>


        <p:confirmDialog id="confirmDialog" message="Esta seguro que desea eliminar el cliente seleccionado?"  
                         header="Eliminar Cliente" severity="alert" widgetVar="confirmation">  

            <p:commandButton id="confirm" value="Aceptar" action="#{beanAdministrarCliente.eliminarCliente()}"
                             oncomplete="confirmation.hide()" update=":form_conci"/>  
            <p:commandButton id="decline" value="Cancelar" onclick="confirmation.hide()" type="button" />   

        </p:confirmDialog>                      
    </ui:define>
</ui:decorate>
